<template>
  <div>ref:{{count}}</div>
  <div>reactive:{{obj.name}}</div>
  <div>reactive:{{obj.age}}</div>
  <div>reactive:{{obj.province}}</div>
  <ul>
    <li v-for="(item,index) in arr" :key="index">{{ item }}</li>
  </ul>
  <button @click="update">点我更新数据</button>
</template>

<script setup>
import { ref,reactive } from 'vue';
// ref可以把我们的数据变成响应式的,如果定义普通数据类型,就用ref这个函数,包裹一下
// 会返回一个响应式的变量,这样ref的值一改变,视图就会立即更新
// 但是在js里面需要用.value来访问值, html模板里面不需要
let count = ref(10)
let arr = ref([1,2,3,4])
let obj =reactive({name:'朱志文',age:21,province:'信阳'})
const update=()=>{
  count.value+=10
  obj={
    name:'小猪',
    age:22,
    province:'信阳市平桥区'
  }
  // 用ref绑定的数据在使用时一定要在属性名后面.value才能使用
  arr.value.push(arr.value.length+1)
  console.log(obj);
  }
</script>